<script setup lang="ts">
import userService from '@/api/modules/user/user.ts'
import SafeTopContainer from '@/components/SafeTopContainer/SafeTopContainer.vue'
import useUserStore from '@/store/modules/user.ts'

const recordsType = ref('all')
const listLoading = ref(false)
const recordsTabList = ref([
  {
    label: '全部',
    value: 'all',
  },
  {
    label: '支出',
    value: 'come',
  },
  {
    label: '收入',
    value: 'in',
  },
])
const userStore = useUserStore()
// 余额
const balance = computed(() => userStore.totalRechargeAmount)
const bonusAmount = computed(() => userStore.bonusAmount)

const recordsList = ref([])
onShow(() => {
  getUsersBalance()
  getIncomeList()
})

async function getUsersBalance() {
  await userStore.getUserInfo()
}

function navigateTo(url: string) {
  uni.navigateTo({ url })
}

function getIncomeList() {
  listLoading.value = true
  userService.income({
    classify: recordsType.value,
  }).then((res) => {
    console.log(res)
    recordsList.value = res.data
  }).finally(() => {
    listLoading.value = false
  })
}

function handleRecordsTypeClick(){
  recordsList.value = []
  getIncomeList()
}
function isIncome(type) {
  return type === 'rechargeRecord' || type === 'redEnvelope'
}

const formatAmount = amount => Number(amount).toFixed(2)
</script>

<template>
  <div class="records-container bg-top">
    <safe-top-container :padding-bottom="5">
      <wd-navbar title="余额中心" custom-class="!bg-transparent" :bordered="false" left-arrow @click-left="navigateBack" />
    </safe-top-container>
    <div class="records-balance bg-balance mx-4 mb-2 mt-4 flex items-center justify-between rounded-lg p-5">
      <div class="text-white">
        <div class="">
          <div class="text-sm">
            当前账户余额（元）
          </div>
          <div class="my-1 flex items-center">
            <div class="text-[35px] text-white font-bold">
              {{ formatPrice(balance) }}
            </div>
            <div class="ml-2 mt-1 text-sm" @click="navigateTo('/pages/withdraw/index')">
              去提现 <wd-icon name="arrow-right" size="22px" />
            </div>
          </div>
          <div class="mt-2 text-sm">
            <wd-icon name="warn-bold" size="10px" /> 不可提现金额：{{ bonusAmount }}
          </div>
        </div>
      </div>
      <wd-button size="small" custom-class="!bg-[#7487FF]" @click="navigateTo('/pages/recharge/index')">
        去充值
      </wd-button>
    </div>
    <div class="records-list-container mx-4 mt-4 rounded-lg bg-white">
      <wd-tabs
        v-model="recordsType"
        :animated="true"
        sticky
        @click="handleRecordsTypeClick"
      >
        <wd-tab
          v-for="item in recordsTabList"
          :key="item.value"
          :title="item.label"
          :name="item.value"
        >
          <!--          <wd-status-tip image="content" tip="暂无记录" /> -->
        </wd-tab>
      </wd-tabs>
      <div class="h-full overflow-y-auto">
        <template v-if="listLoading">
          <div v-for="i in 8" :key="i" class="bg-white rounded shadow-sm p-4 mb-3 animate-pulse">
            <div class="h-4 w-2/3 bg-gray-200 rounded mb-2"></div>
            <div class="h-3 w-1/3 bg-gray-200 rounded"></div>
          </div>
        </template>
        <template v-else>
          <div
            v-for="item in recordsList"
            :key="item.dataUUid"
            class="mb-3 flex items-center justify-between rounded bg-white p-4 shadow-sm"
          >
            <div>
              <div class="font-semibold">
                {{ item.inComeTypeDict }}
              </div>
              <div class="mt-2 text-xs text-gray-500">
                {{ item.date }}
              </div>
            </div>
            <div
              class="text-base font-bold" :class="[
              isIncome(item.inComeType) ? 'text-green-600' : 'text-red-600',
            ]"
            >
              {{ isIncome(item.inComeType) ? '+' : '-' }}{{ formatAmount(item.amount) }}
            </div>
          </div>
        </template>
        <!-- 内容 -->
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.records-container{
  min-height: calc(100vh - 100px);
}
.records-balance{
  box-shadow: 0px 4px 6px  rgba(24, 105, 255, 0.3);
}
:deep(.records-list-container){
  height: calc(100vh - 250px);
  .wd-tabs{
    border-radius: 10px;
    .wd-tabs__nav{
       border-radius: 10px;
    }
  }
}
</style>
